import 'dart:math';

import 'package:common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_random_user/flutter_random_user.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'flutter_face_pile/flutter_face_pile.dart';

class SortSheetWidget extends StatefulWidget {
  const SortSheetWidget({super.key});

  @override
  State<SortSheetWidget> createState() => _SortSheetWidgetState();
}

class _SortSheetWidgetState extends State<SortSheetWidget> {
  late List<FaceHolder> _availableUsers;
  final _facePileUsers = <FaceHolder>[];

  @override
  void initState() {
    super.initState();

    _populateFakeUsers();
  }

  Future<void> _populateFakeUsers() async {
    final randomUsers = userGenerator(
      max: 20,
      loremIpsumParagraphs: 1,
      loremIpsumWords: 100,
    );

    _availableUsers = randomUsers
        .map(
          (randomUser) => FaceHolder(
            id: randomUser.userName,
            name: randomUser.firstName,
            avatar: NetworkImage(randomUser.thumbNail),
          ),
        )
        .toList();
  }

  void _addUserToPile() {
    if (_availableUsers.isNotEmpty) {
      final user = _availableUsers.removeLast();
      setState(() {
        _facePileUsers.add(user);
      });
    }
  }

  void _removeUserFromPile() {
    if (_facePileUsers.isNotEmpty) {
      final randomIndex = Random().nextInt(_facePileUsers.length);
      setState(() {
        final user = _facePileUsers.removeAt(randomIndex);
        _availableUsers.insert(0, user);
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 450,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r))),
      child: Stack(
        children: [
          Image.asset('assets/app/images/member/member_pay_bg.png'),
          Container(
            color: Colors.transparent,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 13),
                  child: OverflowBar(
                    alignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: Image.asset('assets/app/images/member/member_pay_close.png', width: 15.sp),
                        ),
                      ),
                      Expanded(child: Text('筛选', style: TextStyle(color: const Color(0xFF000000), fontSize: 17.sp))),
                      const Expanded(child: SizedBox(width: 60)),
                    ],
                  ),
                ),
                // Text(widget.price, style: TextStyle(color: const Color(0xFF000000), fontSize: 44.sp)),
                Expanded(
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                    child: Column(
                      children: [
                        _buildHeaderWarpper(title: '筛选性别'),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(child: _buildItemWarpper(title: '男', key: '男', sel: false)),
                            Expanded(child: _buildItemWarpper(title: '女', key: '女', sel: true)),
                            Expanded(child: _buildItemWarpper(title: '不限', key: '不限', sel: false)),
                          ],
                        ),
                        const SizedBox(height: 20),
                        _buildHeaderWarpper(title: '不捞取'),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(child: _buildItemWarpper(title: '语音', key: '语音', sel: true)),
                            Expanded(child: _buildItemWarpper(title: '图文', key: '女', sel: false)),
                            Expanded(child: _buildItemWarpper(title: '不限', key: '不限', sel: false)),
                          ],
                        ),
                        const SizedBox(height: 20),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                                alignment: Alignment.centerLeft,
                                decoration: BoxDecoration(
                                    color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(19.r))),
                                child: Text('地区', style: TextStyle(color: Colors.black, fontSize: 15.sp))),
                            Row(
                              children: [
                                Text('不限', style: TextStyle(color: Colors.black, fontSize: 15.sp)),
                                Image.asset('assets/app/images/pond/pond_arrow_right.png', width: 7.w)
                              ],
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  height: 51,
                  margin: const EdgeInsets.only(left: 20, right: 20, top: 20),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color: const Color(0xFF25D4D0), borderRadius: BorderRadius.circular(25)),
                  child: Text(
                    '保存',
                    style: TextStyle(color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w600),
                  ),
                ),
                SizedBox(height: AppScreen.safeAreaPaddingBottom)
              ],
            ),
          ),
        ],
      ),
    );
  }

  Container _buildHeaderWarpper({required String title}) {
    return Container(
        margin: EdgeInsets.only(bottom: 16.h),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(19.r))),
        child: Text(title, style: TextStyle(color: Colors.black, fontSize: 15.sp)));
  }

  GestureDetector _buildItemWarpper(
      {required String title, required String key, bool sel = false, Function? callback}) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        callback?.call(key);
      },
      child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(horizontal: 30.w),
          margin: EdgeInsets.symmetric(horizontal: 5.w),
          decoration: BoxDecoration(
              color: sel ? const Color(0xFFD9FFFE) : const Color(0xFFF6F6F6),
              borderRadius: BorderRadius.circular(23.r),
              border: Border.all(color: const Color(0xFF25D4D0), width: sel ? 1 : 0)),
          height: 36.h,
          child: Text(title,
              style: TextStyle(
                  fontSize: 15.sp,
                  color: sel ? const Color(0xFF25D4D0) : const Color(0xFF333333),
                  fontWeight: FontWeight.w600))),
    );
  }
}
